<template>
    <div class="xsqgason">
        <!-- <router-link to="xq"> -->
            <div class="left">
                <img :src="img" alt="">
                <p class="less">剩余<span class="count">{{count}}</span> 件</p>
            </div>
            <div class="right">
                <p class="wish">{{wish}}</p>
                <p class="p cake">{{cake | fil}}</p>
                <p class="p tool">{{tool |fil}}</p>
                <div class="box">
                    <div><p class="lef"><i class="iconfont icon-triangle-left"></i><span class="dot">●</span ><span class="jian">{{jian}}</span></p><span class="sale">{{sale}}</span></div>
                    <button class="rig"><span class="price">{{price}}</span>|<span class="qiang">{{qiang}}</span></button>
                </div>
            </div>
        <!-- </router-link> -->
    </div>
</template>

<script>
export default {
    props:["img","count","wish","cake","tool","jian","price","qiang","sale"],
    filters:{
        fil(val){
            if(val.length>18){
                return val.substr(0,18)+"..."
            }
            else{
                return val
            }
        }
    }
}
</script>

<style scoped>
    .xsqgason{
        display: flex;
        box-sizing: border-box;
        padding: 0.1rem;
        font-size: 0.12rem;
    }
    .left{
        position: relative;
    }
    img{
        width: 1rem;
        height: 1rem;
    }
    .count{
        color: red;
    }
    .less{
        position: absolute;
        width: 100%;
        bottom: 0;
        background-color: rgba(0,0,0,.3);
        color: #fff;
        z-index: 2;
        text-align: center;
    }
    .right{
        flex: 1;
        text-align: left;
        height: 1rem;
        padding: 0 0.1rem;
    }
    .right p{
        line-height: 0.05rem;
    }
    .box{
        display: flex;
        justify-content: space-between;
        text-align: left;
    }
    .lef{
        position: relative;
        display: inline-block;
        padding-right: 0.1rem;
        font-size: 0.12rem;
        height: 0.2rem;
        color: #f44236;
        background-color: #fcc6c2;
    }
    .dot,.jian{
        position:relative;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
    }
    .dot{
        color: white;
    }
    i{
        display: inline-block;
        width: 0.1rem;
        height: 0.2rem;
        position: absolute;
        left: -0.18rem;
        top: 3%;
        font-size: 0.26rem;
        text-align: center;
        line-height: 0.2rem;
        color: #fcc6c2;
    }
    .sale{
        display: block;
        line-height: 0;
    }
    .rig{
        background-color: red;
        border: none;
        outline: none;
        border-radius: 0.1rem;
        color: white;
        font-size: 0.2rem;
    }
    .p{
        color: #b8b8b8;
    }
</style>